<template>
  <van-nav-bar
    :left-arrow="!leftText"
    :left-text="leftText"
    @click-left="onClickLeft"
    fixed
    placeholder
    safe-area-inset-top
    :border="false"
    id="nav"
    :class="isShowBg ? 'head-bg' : ''"
    z-index="20"
  >
    <div slot="left" v-if="!title">
      <span class="nav-title">H5模板实例</span>
    </div>
    <div slot="title">
      <span class="nav-title">{{ title }}</span>
      <slot name="title"></slot>
    </div>
    <div slot="right">
      <slot></slot>
    </div>
  </van-nav-bar>
</template>

<script>
export default {
  name: 'index',
  props: {
    title: {
      type: String,
      default: ''
    },
    leftText: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      isShowBg: false
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
    this.$nextTick(() => {
      const height = document.getElementById('nav').clientHeight
      this.$store.commit('SET_NAV_HEIGHT', height)
    })
  },
  methods: {
    onClickLeft() {
      this.$router.back()
    },
    handleScroll() {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      this.isShowBg = scrollTop > 0
    }
  }
}
</script>

<style scoped lang="less">
.nav-title {
  font-weight: bold;
  font-size: 17px;
  color: @black;
}
</style>
